<template>
	<view class="my_mission">
		<!-- <div class="mission_title">
			进行中的任务
		</div> -->
		<div class="mission_part">
			<up-tabs lineWidth="100px" itemStyle="height:50px;" :scrollable="false" :list="tabList" @click="clickTab"
				activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:16px"></up-tabs>
			<TaskList @HitBottom="scrolltolower" @reLoad="listReLoad" :getListParams="getListParams"
				:orderList="orderList" :status="status" :hasNextPage="hasNextPage">
			</TaskList>
		</div>
	</view>
	<up-toast ref="uToastRef"></up-toast>
	<orderPrompt ref="order_prompt"></orderPrompt>
</template>

<script setup>
import {
	ref,
	reactive,
	nextTick
} from "vue"
import {
	onShow,onLoad
} from "@dcloudio/uni-app"
import {
	judgeIdentify,
	getDriverTask
} from "@/api/driver.js"
import {
	getCarList
} from "@/api/car.js"

import {
	getToken
} from "@/utils/auth.js"
import orderPrompt from '@/components/ReceivingOrdersPrompt.vue'
import TaskList from "../components/TaskList.vue"
import {
	useUserStore
} from '@/store'
import {
	storeToRefs
} from "pinia"
import {
	getCaptainTask
} from "@/api/captain.js"


/* hooks */
const {
	role
} = storeToRefs(useUserStore())


/* 数据 */
const uToastRef = ref(null)
const order_prompt = ref(null)
const tabList = reactive([{
	name: '待起运',
	status: 'RECEIVED_ORDER'
}, {
	name: '待到达',
	status: 'PROGRESS'
}, {
	name: '待回单',
	status: 'COMPLETED'
}])
const orderList = reactive([])
const status = ref('loadmore')
//获取列表参数
const getListParams = reactive({
	currPage: 1,
	limit: 10,
	status: 'RECEIVED_ORDER',
	statusList: []
})
// 列表数据还有没有下一页
const hasNextPage = ref(false)


/* 函数 */
// 获取列表数据
const getWaybillList = async (params) => {
	uToastRef.value.show({
		message: '加载中...',
		type: 'loading',
		duration: -1
	})
	let res = null
	if (role.value === 'captain') {
		res = await getCaptainTask(params)
	} else {
		res = await getDriverTask(params)
	}
	uToastRef.value.hide()
	if (res.success) {
		Object.assign(getListParams, params)
		hasNextPage.value = res.data.hasNextPage
		if (!res.data.hasNextPage) {
			status.value = "nomore"
		} else {
			status.value = "loadmore"
		}
		orderList.push(...res.data.list)
	}
}
// tab点击
const clickTab = async (e) => {
	getListParams.currPage = 1
	if (e.status === 'COMPLETED') {
		getListParams.status = ''
		getListParams.statusList = ['COMPLETED', 'UPLOAD_RECEIPT']
	} else {
		getListParams.status = e.status,
			getListParams.statusList = []
	}
	orderList.length = 0
	await getWaybillList(getListParams)
}
// 触底刷新
const scrolltolower = async () => {
	if (hasNextPage.value) {
		status.value = "loading"
		let params = {
			...getListParams,
			currPage: getListParams.currPage + 1
		}
		await getWaybillList(params)
	} else {
		status.value = "nomore"
	}
}
// 获取用户验证状态，NOT_REAL代表未实名，DRIVER_REAL代表司机实名，ASSIGNOR_REAL代表委托人实名，实名了多个角色会以“,”连接起来
const getUserVerification = async () => {
	uToastRef.value.show({
		message: '加载中...',
		type: 'loading',
		duration: -1
	})
	let res = await judgeIdentify()
	uToastRef.value.hide()
	if (res.success) {
		if (role.value === "captain") {
			if (!res.data.includes('CAPTAIN_REAL')) {
				order_prompt.value.show()
			}
		} else {
			if (res.data.includes('DRIVER_REAL')) {
				uToastRef.value.show({
					message: '加载中...',
					type: 'loading',
					duration: -1
				})
				// 返回包含DRIVER_REAL就是司机实名或者司机和委托人都实名，再通过查看司机名下车辆看看委托人是否实名
				let res = await getCarList({})
				uToastRef.value.hide()
				if (res.data.total == 0) {
					// 如果没有车辆，就只是司机实名
					order_prompt.value.show(true, false)
				}
			} else {
				order_prompt.value.show()
			}
		}
	}
}
// 点击起运到达回单之后刷新列表
const listReLoad = async () => {
	orderList.length = 0
	let params = {
		...getListParams,
		currPage: 1
	}
	await getWaybillList(params)
}
// 初始化封装
const init = async () => {
	orderList.length = 0
	// 因为下面请求中会调用uToastRef，onshow不能获取dom元素，所以需要nextTick
	await nextTick()
	if (getToken()) {
		await getUserVerification()
		await getWaybillList(getListParams)
	} else {
		uToastRef.value.show({
			position: "top",
			message: '登录后才能看到任务',
			type: 'warning'
		})
	}
}


/* 钩子 */
// tabar每次点击不会触发其他钩子，只能写在onShow里
onShow(() => {
	init()
})
// 页面级配置分享转发
// #ifdef MP-WEIXIN
onLoad(() => {
	uni.showShareMenu({
		withShareTicket: true, // 是否使用带 shareTicket 的转发
		menus: ['shareAppMessage', 'shareTimeline'] // 可分享到朋友圈
	})
})
// #endif
</script>

<style lang="scss" scoped>
.my_mission {
	.mission_title {
		height: 35px;
		line-height: 35px;
		padding: 0 10px;
		background: #f1f1f1;
	}

	.mission_part {
		min-height: calc(100vh - 44px - 35px * 2 - 50px);
		background-color: #fff;

	}
}
</style>